import React, { Component } from 'react'
import { Modal,Input, message,Form, Select,InputNumber,Button } from 'antd'

import axios from 'axios'
export default class Add extends Component {
    state={
        "unitPrice":"",
        "nums":"",
        classifyList:[],
    }
    // 添加模块中的查询方法
    componentDidMount(){
        this.getClassifyList()
    }
    getClassifyList =()=>{
        axios.get("/api/payment/classify/list").then(res=>{
            if(res.data.code===200){
              this.setState({
                classifyList:res.data.page.list
              })
            }
            console.log("@##",res.data)
          },   //成功的回调
          error =>{
            console.log(error)
          }) //失败的回调
    }
    getVal=(e)=>{
        this.setState({
            [e.target.name]:e.target.value
        })
    }
    // 清空缓存数据
    deleteData= (e)=>{
        this.setState({
            [e.target.name]:""
        })
    }
    getUnitPrice =(value)=>{
        this.setState({
            unitPrice:value
        })
    
    }
    getNums =(value)=>{
        this.setState({
            nums:value
        })
    
    }
    // 添加调用的方法
    add=(values)=>{
        console.log(values)
        const {unitPrice,nums} = this.state
        if (unitPrice==="") {
            message.error("单价不能为空！")
        }else if (nums===""){
            message.error("库存量不能为空！")
        }else{
            axios.post("/api/payment/product/save",{
                productName:values.productName, 
                unit:values.unit,
                cid:values.cid,
                unitPrice:this.state.unitPrice,
                nums:this.state.nums,
                totalPrice: unitPrice * nums
            }).then(res=>{
                console.log(res)
                if(res.data.code===200){
                    message.success(res.data.msg,1,()=>{
                        this.props.closeAdd()
                    })
                }
            })
        }
        
    }
  render() {
      const { Option } = Select;
	const {classifyList}=this.state
	const onFinish = (values) => {
		this.add(values)
	};
    return (
      <div>
          <Modal title="添加分类" visible={this.props.addVisible} footer={null} okText={"确定"} cancelText={"取消"} onCancel={this.props.closeAdd} onOk={this.add}>
              <Form name="basic"
				ref={this.formRef}
			    labelCol={{ span: 8 }}
			    wrapperCol={{ span: 8 }}
			    initialValues={{ remember: true }}
				onFinish={onFinish}>
			    <Form.Item
			        label="产品名"
					name="productName"
			        rules={[{ required: true, message: '请输入产品名' }]}
			    >
			    <Input onChange={this.getVal}  name="productName"/>
			    </Form.Item>
			
			    <Form.Item
			        label="单位"
					name="unit"
			        rules={[{ required: true, message: '请输入单位' }]}
			    >
			    <Input name="unit" value={this.state.unit} onChange={this.getVal}/>
				</Form.Item>
				<Form.Item
				    label="分类"
					name="cid"
				>
				<Select placeholder={"请选择分类"} style={{ width: 120 }} onChange={this.handleChange} >
				{
					classifyList.map((items)=>{
						return <Option value={items.id} key={items.id}>{items.classifyName}</Option>
					})
				}
				</Select>
				</Form.Item>
				<Form.Item label="单价" > {/*name="unitPrice"*/}
				<InputNumber min={0} max={99} name="unitPrice" onChange={this.getUnitPrice}/> {/* defaultValue={0}*/}
				</Form.Item>
				<Form.Item label="库存量"  > {/*name="nums"*/}
				<InputNumber min={0} max={1000} name="nums" onChange={this.getNums}/>{/* defaultValue={0}*/}
				</Form.Item>
				
				<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
					<Button type="primary" htmlType="submit">
				        提交
					</Button>
				</Form.Item>
			    </Form>
          </Modal>
          
      </div>
    )
  }
}
